﻿<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style type="text/css">
    #map-canvas { height: 500px ; margin: 0px; padding: 0px; }
    .masterblock { }
        .masterblock .mastercol {    width: 20%;
       width: 18%;
    float: left;
    padding: 1%;
    margin: 1%;
    cursor: pointer;
    border: 1px solid #e8e5e5;
    background-color: #FFF; }
        .masterblock .mastercol .masterlink{     text-align: center;
    }
        .masterblock .mastercol .icon{ font-size:44px;}
        .masterblock .mastercol .menuname{text-align: center; }
</style>
<script type="text/javascript">
    var overlay;
    debugger;
    DebugOverlay.prototype = new google.maps.OverlayView();

    function initialize() {
        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(40.743388, -74.007592)
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var swBound = new google.maps.LatLng(40.73660837340877, -74.01852328);
        var neBound = new google.maps.LatLng(40.75214181, -73.99661518216243);
        var bounds = new google.maps.LatLngBounds(swBound, neBound);

        var srcImage = 'http://library.marist.edu/pix/LibMap3.jpg';

        overlay = new DebugOverlay(bounds, srcImage, map);

        var markerA = new google.maps.Marker({
            position: swBound,
            map: map,
            draggable: true
        });

        var markerB = new google.maps.Marker({
            position: neBound,
            map: map,
            draggable: true
        });

        google.maps.event.addListener(markerA, 'drag', function () {

            var newPointA = markerA.getPosition();
            var newPointB = markerB.getPosition();
            var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);
            overlay.updateBounds(newBounds);
        });

        google.maps.event.addListener(markerB, 'drag', function () {

            var newPointA = markerA.getPosition();
            var newPointB = markerB.getPosition();
            var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);
            overlay.updateBounds(newBounds);
        });

        google.maps.event.addListener(markerA, 'dragend', function () {

            var newPointA = markerA.getPosition();
            var newPointB = markerB.getPosition();
            console.log("point1" + newPointA);
            console.log("point2" + newPointB);
        });


        google.maps.event.addListener(markerB, 'dragend', function () {
            var newPointA = markerA.getPosition();
            var newPointB = markerB.getPosition();
            console.log("point1" + newPointA);
            console.log("point2" + newPointB);
        });

    }

    function DebugOverlay(bounds, image, map) {
        this.bounds_ = bounds;
        this.image_ = image;
        this.map_ = map;
        this.div_ = null;
        this.setMap(map);
    }

    DebugOverlay.prototype.onAdd = function () {

        var div = document.createElement('div');
        div.style.borderStyle = 'none';
        div.style.borderWidth = '0px';
        div.style.position = 'absolute';
        var img = document.createElement('img');
        img.src = this.image_;
        img.style.width = '100%';
        img.style.height = '100%';
        img.style.opacity = '0.5';
        img.style.position = 'absolute';
        div.appendChild(img);
        div.draggable = true;
        this.div_ = div;
        var panes = this.getPanes();
        panes.overlayLayer.appendChild(div);
    };

    DebugOverlay.prototype.draw = function () {
        debugger;
        var overlayProjection = this.getProjection();
        var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
        var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
        var div = this.div_;
        div.style.left = sw.x + 'px';
        div.style.top = ne.y + 'px';
        div.style.width = (ne.x - sw.x) + 'px';
        div.style.height = (sw.y - ne.y) + 'px';
    };

    DebugOverlay.prototype.updateBounds = function (bounds) {
        this.bounds_ = bounds;
        this.draw();
    };

    DebugOverlay.prototype.onRemove = function () {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    };

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="display:none;"></div>
<div class="masterblock">
    <div class="mastercol">
        <a class="masterlink" href="Master/ChurchBoards">
            <div class="icon"><i class="fa fa-folder"></i></div>
            <div class="menuname">Church Boards</div>
        </a>
    </div>
    <div class="mastercol">
        <a class="masterlink" href="Master/ChurchBoardsJobtitle">
            <div class="icon"><i class="fa fa-user"></i></div>
            <div class="menuname">Church Boards Jobtitle</div>
        </a>
    </div>
    <div class="mastercol">
        <a class="masterlink" href="Master/ChurchJobtitleRole">
            <div class="icon"><i class="fa fa-user-plus"></i></div>
            <div class="menuname">Church Job title Role</div>
        </a>
    </div>
    <div class="mastercol">
        <a class="masterlink">
            <div class="icon"><i class="fa fa-user"></i></div>
            <div class="menuname">Church Departments</div>
        </a>
    </div>
    <div class="mastercol">
        <a class="masterlink">
            <div class="icon"><i class="fa fa-user"></i></div>
            <div class="menuname">Church Departments</div>
        </a>
    </div>
</div>
